import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import TodoItem from '../components/TodoItem'
// import styles from './IndexPage.css';

const IndexPage = ({ dispatch, list}) => {
  const [name, setName] = useState('')
  const [type, setType] = useState('all')
  const [showList, setShowList] = useState(list)
  const addTodo = (e) => {
    if(e.keyCode === 13) {
      const value = e.target.value
      if (value.trim()) dispatch({ type: 'todo-dva/addTodo', payload: e.target.value })
      setName('')
    }
  }
  const toggleChecked = (e) => {
    e.persist()
    dispatch({ type: 'todo-dva/toggleChecked', payload: e.target.checked })
  }
  const change = (type) => {
    setType(type)
    switch (type) {
      case 'all':
        setShowList(list)
        break
      case 'active':
        setShowList(list.filter(item => !item.checked))
        break
      case 'completed':
        setShowList(list.filter(item => item.checked))
        break
      default:
        break
    }
  }
  const clearComplated = () => {
    dispatch({ type: 'todo-dva/clearComplated' })
  }
  useEffect(() => {
    change(type)
  }, [list])


  return (
    <section className="todoapp">
      <header className="header">
        <h1>todos</h1>
        <input className="new-todo" placeholder="What needs to be done?" autoFocus value={name} onKeyUp={(e) => addTodo(e)} onChange={(e) => setName(e.target.value)}/>
      </header>
      {/* 列表中没有任务时 隐藏main */}
      {/* 任务编辑状态类名: editing 任务完成状态类名: completed */}
      <section className="main">
        <input className="toggle-all" type="checkbox" checked={list.every(item => item.checked)} onChange={toggleChecked} />
        <ul className="todo-list">
          {
            showList.map(item => (
              <TodoItem item={item} key={item.id}></TodoItem>
            ))
          }
        </ul>
      </section>
      {/* 列表中没有任务时 隐藏footer */}
      {/* 如果没有已完成的任务就隐藏 */}
      <footer className="footer" style={{ display: list.length ? 'block' : 'none' }}>
        <span className="todo-count"><strong>{list.filter(item => !item.checked ).length}</strong> item left</span>
        <ul className="filters">
          <li>
            <button className={type === 'all' ? 'selected' : ''} onClick={() => change('all')}>All</button>
          </li>
          <li>
            <button className={type === 'active' ? 'selected' : ''} onClick={() => change('active')}>Active</button>
          </li>
          <li>
            <button className={type === 'completed' ? 'selected' : ''} onClick={() => change('completed')}>Completed</button>
          </li>
        </ul>
        <button style={{ display: list.some(item => item.checked) ? 'block' : 'none' }} className="clear-completed" onClick={clearComplated}>Clear completed</button>
      </footer>
    </section>
  );
}

IndexPage.propTypes = {
};

function mapStateToProps({ 'todo-dva': { list }}) {
  return { list }
}

export default connect(mapStateToProps)(IndexPage);
